<template>
  <div class="container">
    <!-- 走马灯 -->
    <el-carousel :interval="4000" type="card" height="200px" width="100%">
      <el-carousel-item v-for="(item, i) in bannerList" :key="i">
        <img :src="item.imageUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐部分 -->
    <div class="title"><span>推荐歌单</span></div>
    <div class="recommend">
      <div class="recInfo" v-for="item in recList" :key="item.id" @click="goList(item.id)">
        <img :src="item.picUrl" alt="" />
        <p class="infoTitle">{{ item.name }}</p>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="title"><span>最新音乐</span></div>
    <ul class="songlist">
      <li class="content" v-for="item in songList" :key="item.id" @click="$router.push(`/play?id=${item.id}}`)">
        <div class="songInfo">
            <span>{{item.name}}</span>
            <img src="../assets/images/pause.png" alt="" id="image1">
        </div>
        <div class="singgerInfo">
          <img src="../assets/images/SQ.png" alt="">
          <p>{{item.song.artists[0].name}}--{{item.song.album.name}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //轮播图
      bannerList: [],
      //歌单
      recList: [],
      //最新音乐
      songList: [],
    };
  },

  mounted() {
    this.getBanner();
    this.getPersonList();
    this.getNewSong();
  },
  methods: {
    //获取轮播图
    async getBanner() {
      const { data: res } = await this.$axios.get("banner");
      console.log(res, "响应banner");
      if (res.code === 200) {
        //调用数组的操作方法,过滤filter
        this.bannerList = res.banners.filter((item, i) => i < 7);
      }
    },
    //获取歌单的接口
    async getPersonList() {
      const { data: res } = await this.$axios.get("personalized");
      console.log(res, "响应歌单接口");
      if (res.code === 200) {
        this.$message.success("获取歌单成功");
        this.recList = res.result.filter((item, i) => i < 6);
        console.log(this.recList);
      } else {
        this.$message.error("获取歌单失败");
      }
    },
    //获取最新音乐的方法
    async getNewSong() {
      const { data: res } = await this.$axios.get("personalized/newsong");
      console.log(res, "获取最新音乐");
      if (res.code === 200) {
        this.songList = res.result;
      } else {
        this.$message.error("获取最新音乐失败");
      }
    },
    //封装一个跳转列表的方法
    goList(id){
      console.log(id,"推荐歌单id")
      this.$router.push({
        path:"/list",
        query:{
          id
        }
      })
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.title {
  height: 40px;
}
.title span {
  position: absolute;
  border-style: none none none solid;
  border-width: 2px;
  border-color: #dd001b;
  font-size: 16px;
  height: 20px;
  line-height: 18px;
  color: #333;
  padding-left: 7px;
  margin: 15px 0;
}
.recommend {
  width: 100%;
  /* 弹性盒子 */
  display: flex;
  /* 排序的状态 */
  justify-content: space-around;
  /* 是否折行 */
  flex-wrap: wrap;
}
.recommend .recInfo {
  width: 31%;
}
.recInfo img {
  width: 120px;
  height: 120px;
}
.infoTitle {
  font-size: 13px;
  color: #333;
}
.songlist .content {
  height: 1.1rem;
  padding-top: 12px;
  border-style: none none solid;
  border-width: 2px;
  border-color: #eeeeee;
}

.songlist .content span {
  font-size: 17px;
  padding-left: 8px;
  padding-bottom: 2px;
}

.songlist .content div {
  margin-top: 5px;
  margin-bottom: 5px;
}

.songlist .content div p {
  font-size: 12px;
  color: #888;
  display: inline;
}

.songlist .content div img {
  margin-left: 8px;
}

.songlist .content #image1 {
  position: relative;
  top: 5px;
  right: 25px;
  float: right;
}
.songInfo {
  height: 25px;
}
.songInfo span {
  float: left;
}
.singgerInfo {
  height: 20px;
}
.singgerInfo p,
.singgerInfo img {
  float: left;
}
</style>